<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_header_include::frag(~{::title},~{::style},~{})">
  <title>废弃池</title>
  <style>
    button a {
      color: #fff !important;
    }

    .formItem,
    .formItem .el-form-item__content {
      width: 100%
    }
  </style>
</head>

<body>

  <div id="mainDiv" class="mainPadding" style="display: none;">
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
      <el-breadcrumb-item>Home</el-breadcrumb-item>
      <el-breadcrumb-item>资源管理</el-breadcrumb-item>
      <el-breadcrumb-item>废弃池</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="marginB20">
      <el-button type="primary" @click="dialogChooseList = true"><i class="el-icon-menu"></i>选择列</el-button>
      <shiro:hasPermission name="aggregation:abandonPool:export">
        <el-button v-if="isExport1" icon="el-icon-download" type="warning" @click="exportMes">废弃池导出</el-button>
        <el-button v-else icon="el-icon-loading" type="warning" disabled>废弃池导出中</el-button>
      </shiro:hasPermission>

    </el-row>
    <div class="mainSearchBg">
      <div class="mainSearchFormBox">
        <el-form :inline="true" :model="queryForm" class="demo-form-inline mainSearchForm" ref="queryForm">
          <el-form-item label="客户姓名:">
            <el-input v-model="queryForm.cusName" placeholder="客户姓名" maxLength="11"></el-input>
          </el-form-item>
          <el-form-item label="手机号:">
            <el-input v-model="queryForm.phone" placeholder="手机号" maxLength="11"></el-input>
          </el-form-item>
          <el-form-item label="资源ID:">
            <el-input v-model="queryForm.clueId" placeholder="资源ID"></el-input>
          </el-form-item>
          <el-form-item label="搜索词:">
            <el-input v-model="queryForm.searchWord" placeholder="搜索词"></el-input>
          </el-form-item>
          <el-form-item label="媒介:">
            <el-select v-model="queryForm.source" placeholder="媒介" clearable filterable>
              <el-option v-for="item in mediumArr" :key="item.value" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间:">
            <el-date-picker v-model="queryForm.createTime1" type="datetime" placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="—" class="widthauto">
            <el-date-picker v-model="queryForm.createTime2" type="datetime" placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="QQ:">
            <el-input v-model="queryForm.qq" placeholder="QQ" maxLength="20" @keyup.native="number"></el-input>
          </el-form-item>
          <el-form-item label="微信:">
            <el-input v-model="queryForm.wechat" placeholder="微信"></el-input>
          </el-form-item>
          <el-row v-show="isShow">
            <el-form-item label="资源专员:">
              <el-select v-model="queryForm.zyzyId" placeholder="资源专员" clearable filterable>
                <el-option v-for="item in zyzyArr" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属组:">
              <el-input v-model="queryForm.sourcetwo" placeholder="所属组"></el-input>
            </el-form-item>
            <el-form-item label="业务线:">
              <el-select v-model="queryForm.businessLineList" placeholder="业务线" clearable filterable multiple>
                <el-option v-for="item in businessLineArr" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="废弃原因:">
              <el-select v-model="queryForm.abandonReason" placeholder="废弃原因" clearable>
                <el-option v-for="item in abandonReasonArr" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="资源类别:">
              <el-select v-model="queryForm.category" placeholder="资源类别" clearable filterable>
                <el-option v-for="item in categoryArr" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="资源类型:">
              <el-select v-model="queryForm.type" placeholder="资源类型" clearable>
                <el-option v-for="item in typeArr" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="资源项目:">
              <el-select v-model="queryForm.projectId" placeholder="资源项目" clearable filterable>
                <el-option v-for="item in proArr" :key="item.id" :label="item.projectName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="邮箱:">
              <el-input v-model="queryForm.email" placeholder="邮箱" maxLength="50"></el-input>
            </el-form-item>
            <el-form-item label="废弃时间:">
              <el-date-picker format="yyyy-MM-dd HH:mm:ss" v-model="queryForm.abandonTimeStart" type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="—" class="widthauto">
              <el-date-picker format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59" v-model="queryForm.abandonTimeEnd"
                type="datetime" placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-row>
          <div class="mainSearchBtnBox">
            <el-button icon="el-icon-search" type="primary" @click="initList()" class="searchBtn">搜索</el-button>
            <!-- <el-button type="info" class="searchBtn">取消</el-button> -->
            <span style="color: #5c6be8;cursor: pointer;margin:0 10px;" @click="toogleClick"><span
                v-if="isShow">收起</span><span v-else>展开更多</span><i
                :class="{'greycolor paddingL6 el-icon-arrow-up':isShow,'greycolor paddingL6 el-icon-arrow-down':!isShow}"></i></span>
          </div>
        </el-form>
      </div>
      <!--<el-table :data="tableData" border style="width: 100%" tooltip-effect="light"  ref="multipleTable">-->
      <!--<el-table-column type="index" width="55"  label="序号"  prop="clueid"> </el-table-column>-->
      <!--<el-table-column prop="createTime" label="创建时间"  align="center"  width="170"></el-table-column>-->
      <!--<el-table-column prop="projectName" label="资源项目" align="center"  width="170"></el-table-column>-->
      <!--<el-table-column prop="searchWord" label="搜索词"  align="center"  width="170"></el-table-column>-->
      <!--<el-table-column prop="sourceTypeName" label="广告位" align="center"  width="170"></el-table-column>-->
      <!--<el-table-column prop="sourceName" label="媒介" align="center"  width="170"></el-table-column>-->
      <!--<el-table-column prop="typeName" label="资源类型" align="center" width="170"></el-table-column>-->
      <!--<el-table-column prop="categoryName" label="资源类别" align="center"   width="170"></el-table-column>-->
      <!--<el-table-column prop="industryCategoryName" label="行业类别" align="center"   width="170"></el-table-column>-->
      <!--<el-table-column prop="cusName" label="客户姓名" align="center"   width="170"></el-table-column>-->
      <!--<el-table-column prop="phone" label="手机" align="center"  width="170"></el-table-column>-->
      <!--<el-table-column prop="messageTime" label="留言时间" align="center"  width="170"></el-table-column>-->
      <!--<el-table-column prop="messagePoint" label="留言重点"  align="center"  width="170"></el-table-column>-->
      <!--<el-table-column prop="qq" label="QQ"  align="center"  width="170"></el-table-column>-->
      <!--<el-table-column prop="email" label="邮箱" align="center" width="170"></el-table-column>-->
      <!--<el-table-column prop="address" label="地址" align="center"  width="170"></el-table-column>-->
      <!--<el-table-column prop="wechat" label="微信" align="center"  width="170"></el-table-column>-->
      <!--<el-table-column prop="zyzyName" label="资源专员" align="center"  width="170"></el-table-column>-->
      <!--<el-table-column prop="releaseReason" label="废弃原因" align="center"  width="170">-->
      <!--<template slot-scope="scope">-->
      <!--<el-button @click="openReleaseUserInfo(scope.row)" type="text" size="small">-->
      <!--{{scope.row.releaseReason}}<br>-->
      <!--查看释放人员-->
      <!--</el-button>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column prop="releaseReasonName" label="废弃时间" align="center"  width="170"></el-table-column>-->
      <!--</el-table>-->
      <el-table ref="multipleTable" tooltip-effect="dark" border @selection-change="handleSelectionChange"
        @row-dblclick="showClueDetailInfo" style="width: 100%" :data="tableData">
        <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
        <el-table-column align="center" :key="item.fieldCode" :prop="item.fieldCode" :label="item.displayName"
          :width="item.width" v-for="(item,key,index) in tableColums" v-if="item.fieldCode == 'abandonReason'">
          <template slot-scope="scope">
            <div>
              {{scope.row.abandonReason==1?"重复资源":scope.row.abandonReason==2?"不跟进-空号":scope.row.abandonReason==3?"撤回废弃":scope.row.abandonReason==4?"留言接口废弃":scope.row.abandonReason==5?"删除废弃":scope.row.abandonReason==6?"2天内邀约去重":scope.row.abandonReason==7?"签约去重":scope.row.abandonReason==8?"社群资源去重":scope.row.abandonReason==9?"黑名单废弃":scope.row.abandonReason==10?"联系方式仅邮箱":scope.row.abandonReason==11?"无联系方式废弃":scope.row.abandonReason==12?"同电销组项目废弃":scope.row.abandonReason==13?"15天重复废弃":scope.row.abandonReason==14?"信息流60天去重":scope.row.abandonReason==15?"30天重复资源":scope.row.abandonReason==16?"重电销废弃":scope.row.abandonReason==17?"微信社群／短视频去重":scope.row.abandonReason==18?"7天重复废弃":scope.row.abandonReason==19?"推广无效废弃":scope.row.abandonReason==20?"15天重话务":scope.row.abandonReason==21?"咨询项目一致废弃":scope.row.abandonReason==22?"非重复咨询项目废弃":scope.row.abandonReason==23?"无匹配的加盟经纪":scope.row.abandonReason==24?"商家重复废弃":""}}
            </div>
            <div v-if="scope.row.abandonReason==2">
              <el-button @click="openReleaseUserInfo(scope.row)" type="text" size="small">
                查看释放人员
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" :key="item.fieldCode" :prop="item.fieldCode" :label="item.displayName"
          :width="item.width" v-else-if="item.fieldCode == 'address'">
          <template slot-scope="scope">
            {{scope.row.province}}{{scope.row.city}}{{scope.row.district}}
          </template>
        </el-table-column>
        <el-table-column align="center" :key="item.fieldCode" :prop="item.fieldCode" :label="item.displayName"
          :width="item.width" v-else>
        </el-table-column>
      </el-table>
      <table-pagination :pager="pager" v-if="paginationShow" @change="initList"></table-pagination>
    </div>
    <!-- 释放人员信息 -->
    <el-dialog title="释放人员信息" :visible.sync="dialogFormVisible">
      <el-table ref="dialogTableData" :data="dialogTableData" tooltip-effect="dark" border>
        <el-table-column align="center" prop="teleCompanyName" label="电销分公司"></el-table-column>
        <el-table-column align="center" prop="teleManagerName" label="电销总经理"></el-table-column>
        <el-table-column align="center" prop="teleDeptName" label="电销事业部"></el-table-column>
        <el-table-column align="center" prop="teleCeoName" label="电销副总"></el-table-column>
        <el-table-column align="center" prop="teleGorupName" label="电销组"></el-table-column>
        <el-table-column align="center" prop="teleDirectorName" label="电销总监"></el-table-column>
        <el-table-column align="center" prop="teleSaleName" label="电销顾问"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 选择列 -->
    <!-- dialog -->
    <el-dialog title="自定义列" :visible.sync="dialogChooseList" class="elCheckboxGroup">
      <el-form :model="form">
        <el-form-item label="" prop="type">
          <el-checkbox-group v-model="form.type">
            <span>
            </span>
            <el-checkbox :label="item.sortNum+'_'+item.fieldCode+'_'+item.displayName+'_'+item.id+'_'+item.width"
              name="type" :key="item.fieldCode" v-for="(item,index) in  allTableColums ">
              {{item.displayName}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmColumn">确 定</el-button>
        <el-button @click="dialogChooseList = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>

  <!-- import common js-->
  <div th:include="_footer_include :: #jsLib"></div>
  <!--<script th:src="@{/js/excel/xlsx.min.js}" src="../static/js/excel/xlsx.min.js"></script>-->
  <script th:inline="javascript">
    // <!--电销组-->
    var proSelect = [[${ proSelect }]]
    var zyzyList = [[${ zyzyList }]]
    var fieldList = [[${ fieldList }]];//自定义字段
    var userFieldList = [[${ userFieldList }]];//用户自定义字段
    // 查询 模块
    var mainDivVM = new Vue({
      el: '#mainDiv',
      data: {
        isExport1: true,
        paginationShow: false,
        isShow: false,
        dialogFormVisible: false,
        dialogChooseList: false,
        multipleSelection: [],//选择行
        allTableColums: [],//自定义列
        tableColums: [],
        tableData: [],
        categoryArr: [],
        businessLineArr: [],
        typeArr: [],
        mediumArr: [],
        zyzyArr: zyzyList,
        proArr: proSelect,
        abandonReasonArr: [{ value: "1", name: "重复资源" }, { value: "2", name: "不跟进-空号" }, { value: "3", name: "撤回废弃" }, { value: "4", name: "留言接口废弃" }, { value: "5", name: "删除废弃" }, { value: "6", name: "2天内邀约去重" }, { value: "7", name: "签约去重" }, { value: "8", name: "社群资源去重" }, { value: "9", name: "黑名单废弃" }, { value: "10", name: "联系方式仅邮箱" }, { value: "11", name: "无联系方式废弃" }, { value: "12", name: "同电销组项目废弃" }, { value: "13", name: "15天重复废弃" }, { value: "14", name: "信息流60天去重" }, { value: "15", name: "30天重复资源" }, { value: "16", name: "重电销废弃" }, { value: "17", name: "微信社群／短视频去重" }, { value: "18", name: "7天重复废弃" }, { value: "19", name: "推广无效废弃" }, { value: "20", name: "15天重话务" }, { value: "21", name: "咨询项目一致废弃" }, { value: "22", name: "非重复咨询项目废弃" }, { value: "23", name: "无匹配的加盟经纪" }, { value: "24", name: "商家重复废弃" }],
        queryForm: {
          starTime: '',
          endTime: '',
          sourcetwo: '',
          businessLineList: [],
          medium: '',
          resourcePerson: '',
          abandonReason: '',
          resourceType: '',
          resourceStyle: '',
          resourceProject: '',
          phone: '',
          customerName: '',
          email: '',
          abandonTimeStart: '',
          abandonTimeEnd: "",
        },
        dialogTableData: [],
        form: {
          type: [],
        },
        pager: {
          total: 0,
          currentPage: 1,
          pageSize: 20,
        },
        storeForm: {
          starTime: '',
          endTime: '',
          medium: '',
          businessLineList: [],
          resourcePerson: '',
          abandonReason: '',
          resourceType: '',
          resourceStyle: '',
          resourceProject: '',
          phone: '',
          customerName: ''
        },
        storeId: '',
        scrollTop: 0,
      },
      methods: {
        handleSelectionChange(val) {//选择节点的事件
          // console.log(val)
          this.multipleSelection = val;
        },
        searchTable() {
          var starTime = this.searchform.starTime;
          var endTime = this.searchform.endTime;
          if (endTime) {
            if (starTime > endTime) {
              this.$message({
                message: '开始时间不能大于结束时间',
                type: 'warning'
              });
              return;
            }
          }
        },
        confirmColumn() {
          //处理用户选择的列
          var customerShowColun = [];
          var customerColumn = this.form.type;
          if (customerColumn.length == 0) {
            this.$message({
              message: '请选择列',
              type: 'warning'
            });
            return;
          }
          this.dialogChooseList = false;
          customerColumn.sort(this.sortNumber);//对选择的列排序
          var idList = [];
          for (var i = 0; i < customerColumn.length; i++) {
            var curItem = customerColumn[i];
            var itemArr = curItem.split("_");
            var obj = {};
            obj.fieldCode = itemArr[1];
            obj.displayName = itemArr[2];
            obj.width = itemArr[4];
            customerShowColun.push(obj);
            idList.push(itemArr[3])
          }
          this.tableColums = customerShowColun;
          var param = {};
          param.fieldIdList = idList;
          param.menuCode = "aggregation:abandonPool";
          if (idList.length != 0) {
            axios.post('/customfield/customField/saveUserField', param)
              .then(function (response) {
              }).catch(function (error) {
                console.log(error);
              });
          }
        },
        //展现详情
        showClueDetailInfo(row, column) {
          // 存储选中信息--start
          var clueId = row.clueId;
          setSessionStore("abandonListStoreForm", this.storeForm);
          var otherVal = {
            "currentPage": this.pager.currentPage,
            "clueId": clueId,
            "scrollTop": this.$el.querySelector('.el-table__body-wrapper').scrollTop
          }
          setSessionStore("abandonListOtherVal", otherVal);
          // 存储选中信息--end  
          // window.location.href='/tele/clueMyCustomerInfo/customerInfoReadOnly?clueId='+row.clueId;
          window.location.href = '/tele/clueMyCustomerInfo/customerInfoReadOnly?clueId=' + clueId;
        },
        sortNumber(a, b) {
          //对数组中元素，按照数字 从小到大 排序
          return a.split("_")[0] - b.split("_")[0];
        },
        openReleaseUserInfo(row) {
          this.dialogTableData = [row];
          // console.log(row)
          this.dialogFormVisible = true
        },
        resetForm(formName) {
          if (mainDivVM.$refs[formName]) {
            mainDivVM.$refs[formName].resetFields();
          }
        },
        initColumn() {
          //初始化table 列 和 用户自定义列
          this.allTableColums = fieldList;
          if (userFieldList.length != 0) {
            var type = [];
            for (var i = 0; i < userFieldList.length; i++) {
              type.push(userFieldList[i].sortNum + '_' + userFieldList[i].fieldCode + '_' + userFieldList[i].displayName + '_' + userFieldList[i].fieldId + '_' + userFieldList[i].width)
            }
            this.form.type = type;
            this.confirmColumn();
          } else {
            var type = [];
            for (var i = 0; i < fieldList.length; i++) {
              type.push(fieldList[i].sortNum + '_' + fieldList[i].fieldCode + '_' + fieldList[i].displayName + '_' + fieldList[i].id + '_' + fieldList[i].width)
            }
            this.form.type = type;
            this.confirmColumn();
          }

        },
        initList() {
          // console.log(this.queryForm)
          var param = this.queryForm;
          param.pageSize = this.pager.pageSize;
          param.pageNum = this.pager.currentPage;
          axios.post('/abandonsource/queryPage', param).then(function (response) {
            if (null === response || response.data == null || response.data.code != '0') {
              if (response.data.code != '0') {
                mainDivVM.$message({ message: response.data.msg, type: 'warning' });
              }
              return false;
            } else {
              mainDivVM.tableData = response.data.data.data;
              mainDivVM.pager.currentPage = response.data.data.currentPage;
              mainDivVM.pager.total = response.data.data.total;
              mainDivVM.pager.pageSize = response.data.data.pageSize;

              // 取出存储的id
              if (!mainDivVM.paginationShow) {
                if (mainDivVM.storeId) {
                  mainDivVM.$nextTick(function () {
                    var storage = [];
                    mainDivVM.tableData.forEach(function (item, index) {
                      if (item.clueId === mainDivVM.storeId) {
                        storage.push(mainDivVM.tableData[index]);
                      }
                    })
                    // mainDivVM.toggleSelection(storage);
                    mainDivVM.$el.querySelector('.el-table__body-wrapper').scrollTop = mainDivVM.scrollTop;
                  })
                }
              } else {
                removeSessionStore("abandonListStoreForm");
                removeSessionStore("abandonListOtherVal");
              }
              mainDivVM.paginationShow = true;
              mainDivVM.storeForm = mainDivVM.queryForm;
            }
          })
        },
        toogleClick() {
          if (this.isShow) {
            this.isShow = false
          } else {
            this.isShow = true
          }
        },
        exportMes() {
          var param = this.queryForm;
          var starTime = this.queryForm.createTime1;
          var endTime = this.queryForm.createTime2;
          if (endTime) {
            if (starTime > endTime) {
              this.$message({
                message: '开始时间不能大于结束时间',
                type: 'warning'
              });
              return;
            }
          }
          if (this.queryForm.abandonTimeEnd) {
            if (this.queryForm.abandonTimeStart > this.queryForm.abandonTimeEnd) {
              this.$message({
                message: '废弃时间结束时间不能早于开始时间',
                type: 'warning'
              });
              return;
            }
          }
          param.pageNum = null;
          param.pageSize = null;
          axios.post('/abandonsource/findAbandonCluesCount', param)
            .then(function (response) {
              if (response.data.data > 10000) {
                mainDivVM.$message({
                  message: '选择数据过多，不允许进行一次性导出',
                  type: 'warning'
                });
                return;
              }
              mainDivVM.$confirm("当前导出数据量为" + response.data.data + "条，确认导出吗？", '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {

                mainDivVM.isExport1 = false;
                // 存localstorage
                localStorage.setItem('abandonExport', '1');
                mainDivVM.timedown();

                window.parent.abandonExport(param)
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消导出'
                });
              });
            })
            .catch(function (error) {
              console.log(error);
            });


        },


        timedown() {
          clearInterval(this.timer);
          var storageDistributeExport1 = localStorage.getItem("abandonExport");
          if (storageDistributeExport1) {
            this.isExport1 = false;
          } else {
            this.isExport1 = true;
          }
          if (storageDistributeExport1) {
            this.timer = setInterval(this.timedown, 1000)
          } else {
            clearInterval(this.timer)
          }
        },
      },
      created() {
        var storageDistributeExport1 = localStorage.getItem("abandonExport");
        if (storageDistributeExport1) {
          this.timedown();
        }
        // 进入页面判断有是否有存储值
        if (!this.paginationShow) {
          var storeVal = getSessionStore("abandonListStoreForm");
          var otherVal = getSessionStore("abandonListOtherVal");
          if (storeVal && otherVal) {
            this.queryForm = storeVal;
            this.$set(this.pager, "currentPage", otherVal.currentPage);
            this.storeId = otherVal.clueId;
            this.scrollTop = otherVal.scrollTop;
          }
        };
        // 取页数存储
        var localVal = localStorage.getItem('allChangePageSize') ? parseInt(localStorage.getItem('allChangePageSize')) : '';
        if (localVal) { this.pager.pageSize = localVal; }
        this.initList();
        this.initColumn()
        //初始资源类别数据
        var param = {};
        param.groupCode = "clueCategory";
        axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode', param).then(function (response) {
          // console.log(response.data.data)
          mainDivVM.categoryArr = response.data.data;
        });
        //初始化资源类型数据
        param = {};
        param.groupCode = "clueType";
        axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode', param).then(function (response) {
          // console.log(response.data.data)
          mainDivVM.typeArr = response.data.data;
        });
        //初始化业务线数据
        param = {};
        param.groupCode = "businessLine";
        axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode', param).then(function (response) {
          // console.log(response.data.data)
          mainDivVM.businessLineArr = response.data.data;
        });

        //初始化媒介数据
        param = {};
        param.groupCode = "medium";
        axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode', param).then(function (response) {
          // console.log(response.data.data)
          mainDivVM.mediumArr = response.data.data;
        });
      },//created方法 结束
      mounted() {
        document.getElementById('mainDiv').style.display = 'block';
      }
    });

  </script>
</body>

</html>